﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.PollReportViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Reports
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="pageHeadingContainer"><h2 class="pageHeading">Reports</h2></div>
    <div id="contentContainer">
    <p><%= Html.ActionLink("Reports > ", "Index", "SystemReport", null, new { @class = "breadcrumb" })%>System Utilisation Report</p>
        
        <div id="pageSubMenuContainer">
            <ul id="pageMenu">
                <li><a href="#" onclick="changeType('BarChart');drawthing('BarChart');">Horizontal Bar</a></li>
                <li><a href="#" onclick="changeType('ColumnChart'); drawthing('ColumnChart');">Vertical Bar</a></li>
                <li><a href="#" onclick="changeType('PieChart'); drawthing('PieChart');">Pie</a></li>
            </ul>
        </div>
    <% using (Html.BeginForm("SystemUtilizationPDF","SystemReport",FormMethod.Post)) { %>
            <input type="hidden" id="urls" name="urls" />   
            <input type="submit" value="Generate PDF" /><%}%>            
    <script type="text/javascript" src="../../Scripts/Report.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    // Build the array of data
    var dataArray = [];
    var chartType = "ColumnChart";
    dataArray[0] = ['Access Privileges', 'Number of Users'];

    <%  
        int i = 1;
        foreach (var role in Model.roleList) 
        {%>   
            dataArray[<%=i%>] = ['<%=role.Key%>', <%=role.Value%>];
         <%  
         i++;
         }    
    %>
    </script>
    <script type='text/javascript'>
        google.load("visualization", "1.0", { packages: ["imagechart"] });
    </script>
    <script type='text/javascript'>
    google.setOnLoadCallback(drawthing);
    function drawthing(type) {
      var data = google.visualization.arrayToDataTable(dataArray);
      var chl="";
      if (type == "PieChart") 
      {
        for (var a=1; a<<%=i%>;a++)
        {
          chl+=dataArray[a][1]+"|";
        }
        type="p";
      }
      else if (type=="BarChart") {type="bhs";var chxt='y,y,x,x';}
      else {type="bvg"; var chxt='x,x,y,y';}
      if (type == "p") 
      { 
        var chs = '485x280';
        var options = {chl: chl, cht: type, chs: chs};
      }     
      else {
          var max=0;
          for (var a=1; a<<%=i%>;a++)
            {
              if (dataArray[a][1]>max) {max=dataArray[a][1];}
              chl+=dataArray[a][0]+"|";
            }
          max = "2,0,"+max;
          var options = {chs: '550x300', cht: type, chxt:chxt, chxr:max, chdl:"", chxp:'1,50|3,50', chxl:'0:|'+chl+'1:|Type of User|3:|Number of Users', chbh:'r,0.5,1.5'};
      }
          var chart = new google.visualization.ImageChart(document.getElementById('Image_div'));
          chart.draw(data, options);
          var url=chart.getImageUrl();
          if (type!="p") {url=url.replace("&chdl&","&");}
          document.getElementById("urls").value=url;
      }
    </script>
    <!--Div to hold the chart-->
    <div id="Image_div" style="height:0;width:0;visibility:hidden"></div>
    <div id="chart_div" align="center"></div>
    </div>

</asp:Content>
